import React, { useState, useEffect, useRef } from 'react'
import { connect } from 'react-redux'
import '@/css/Home.css';
import getSinaStk from '@/utils/get-sina-stock.js'
import StkSuggest from '@/comps/stkSuggest/stkSuggest.js'
function Contribution(props) {
  const [iptStk, setIptStk] = useState('')
  const [iptStkCode, setIptStkCode] = useState('')
  const [iptStkName, setIptStkName] = useState('')
  const [tagValue, setTagValue] = useState([])
  const [updownValue, setUpdownValue] = useState(1)
  const [submitCn, setSubmitCn] = useState('提交')
  const [btnDisabled, setBtnDisabled] = useState(false)
  const [post, setPost] = useState('')
  const [stkCodeName, setStkCodeName] = useState([])//联想出来的股票名字
  const couterRef = useRef();
  const addTag = () => {
    setTagValue((tagValue) => {
      var _value = couterRef.current.value
      couterRef.current.value = ''
      couterRef.current.focus();
      if (tagValue.some((v) => { return v == _value }) || _value === '') {
        return tagValue
      } else {
        tagValue.push(_value)
        return [...tagValue]
      }
    })
  }
  const delTag = (idx) => {
    tagValue.splice(idx, 1)
    setTagValue([...tagValue])
  }
  const handleUpDownRadio = (e) => {
    setUpdownValue(e.target.value)
  }
  const handelSubmit = async () => {
    // setBtnDisabled(true)
    // setSubmitCn('提交中...')
    console.log('======标签', tagValue);
    console.log('======涨跌值', updownValue);
    console.log('======文本框值', post);
    console.log('======股票框值', iptStk);
     //此处发送请求
    var data = await React.$axios.post(React.$api.insertStkNotes, { tagValue: tagValue.join(','), updownValue, post, stk_name:iptStkCode,stk_code:iptStkName})
    console.log('======data纸质', data);
    if (data.errCode === 1) {
      console.log('======111', 111);
      setIptStk('')
      setTagValue([])
      setPost('不不不吵不闹')
      setUpdownValue("0")
    }
  }
  const handleThinkStkList = (stkVal) => {
    getSinaStk(stkVal, function (val) {
      setStkCodeName(val)//这个值将传递给子组件StkSuggest
    }, 'all')
    setIptStk(stkVal)
  }
//股票输入框的值
  const handleThinkStk = (name, code) => {
    setIptStk(name + '(' + code + ')')
    setIptStkName(name)
    setIptStkCode(code)
  }
  const clearIpt = () => {
    setIptStk('')
    setStkCodeName('')
  }

  return (
    <div>
      <div className="pd510 ctbu-name">股票名</div>
      <div style={{"position":"relative"}}>
        <div className="yt yt-ac" >
          <input type="text" className="yt-f1 pd510 font16 ctbu-input" placeholder="输入股票名" value={iptStk} onChange={(e) => { handleThinkStkList(e.target.value) }} />
          {iptStk && <div className="stk-close" onClick={clearIpt}><i className="alifont font14">&#xe7be;</i></div>}
        </div>
        <StkSuggest stkCodeName={stkCodeName} handleThinkStk={handleThinkStk}></StkSuggest>
      </div>
      <div className="pd510 ctbu-mgt5 ctbu-name">涨跌结果</div>
      <div className="pd510">
        <label className="wsj-radio wsj-radio-tick wsj-radio-red" >
          <span className="wsj-ra-a"><input type="radio" name="updown" value="1" defaultChecked onChange={handleUpDownRadio} /><span className="raicon"></span></span>
          <span className="wsj-ra-b" style={{color:'#f44f7f',fontSize:'0.14rem'}}>上涨</span>
        </label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label className="wsj-radio wsj-radio-tick wsj-radio-green" >
                <span className="wsj-ra-a"><input  type="radio" name="updown" value="0" onChange={handleUpDownRadio} /><span className="raicon"></span></span>
                <span className="wsj-ra-b" style={{color:'#09BB07',fontSize:'0.14rem'}}>下跌</span>
            </label>
      </div>
      <div className="pd510 ctbu-mgt5 ctbu-name">涨跌因素</div>
      <div className="yt yt-bm pd510" style={tagValue.length===0 ? { "display":"none"} : {}}>
        {tagValue.map((v,k) => { 
          return (
            <div className="yt yt-ac yt-self-center ctbu-tag-wrap" key={k} onClick={() => { delTag(k)}}>
              <div className="ctbu-tagname" >{v}</div>
              <i className="alifont font20 ctbu-tagname-del">&#xe625;</i>
            </div>
         )
        })}
      </div>
      <div className="pd510"><input type="text" className="ctbu-tag font16" placeholder="输入涨跌因素" ref={couterRef} /><i className="alifont font20" style={{ color: '#38f' }} onClick={addTag}>&#xe62d;</i></div>
      <div className="pd510 ctbu-mgt5 ctbu-name">补充文本</div>
      <div className="pd510">
        <textarea className="font16 ctbu-textarea" value={post} onChange={(e) => { setPost(e.target.value) }}></textarea>
      </div>
      <button disabled={btnDisabled} onTouchStart={() => { }} className="font16 push_button" onClick={handelSubmit}>{submitCn}</button>
      <button className="font16 push_button" onClick={props.onIncreaseClick}>发送{props.haha.cc}dispatch</button>
      <button className="font16 push_button" onClick={props.addCountAsync}>发送{props.gaga.aa}第2个atch</button>
    </div>
  )
}

const mapStateToProps= (state)=> { 
  return {
    haha: state.visi,
    gaga:state.second
  }
}

const mapDispatchToProps=(dispatch)=> {
  return {
    onIncreaseClick: () => dispatch({
      type: 'cat',
      payload: {aa:77,bb:88,cc:99}
    }),
    addCountAsync: ()=>dispatch(aaa())
  }
}
function aaa() { 
  return (dispatch) => { 
    setTimeout( () => {
      dispatch({type:'ko'})
    }, 500)
  }
}
    
export default connect(mapStateToProps,mapDispatchToProps)(Contribution)